#include("../common/_layout.html")
#include("../common/_navbar.html")
#@layout()

#define content()
	#@navbar("team")
	<div class="container">
		<h1>队伍编成</h1>
		<button class="btn btn-primary" id="createTeam">创建队伍</button>
		<div class="table-responsive mainTable">
			<table class="table table-sm table-hover table-bordered" id="resultTable">
				<thead id="tableHead">
					<tr>
						<td>队伍名</td>
						<td>①</td>
						<td>②</td>
						<td>③</td>
						<td>④</td>
						<td>⑤</td>
						<td>⑥</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody id="tableBody"></tbody>
			</table>
		</div>
	</div>
	<div class="modal fade" id="TeamEditor" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
            	<div class="modal-header">
	                <h4 class="modal-title" id="modalTitle">编辑队伍</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	            </div>
	            <div class="modal-body">
	            	<table>
	            		<tr>
	            			<td>队伍名</td>
	            			<td><input type="text" id="teamName" /><input type="hidden" id="teamId" /></td>
	            		</tr>
	            		<tr>
	            			<td>①</td>
	            			<td><select id="teamServent1"></select></td>
	            		</tr>
	            		<tr>
	            			<td>②</td>
	            			<td><select id="teamServent2"></select></td>
	            		</tr>
	            		<tr>
	            			<td>③</td>
	            			<td><select id="teamServent3"></select></td>
	            		</tr>
	            		<tr>
	            			<td>④</td>
	            			<td><select id="teamServent4"></select></td>
	            		</tr>
	            		<tr>
	            			<td>⑤</td>
	            			<td><select id="teamServent5"></select></td>
	            		</tr>
	            		<tr>
	            			<td>⑥</td>
	            			<td><select id="teamServent6"></select></td>
	            		</tr>
	            	</table>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-primary" id="saveTeam">保存</button>
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	            </div>
	        </div>
		</div>
	</div>
	<script type="text/javascript">
    	var serventOptionsHTML = "<option value=''></option>";
    	var myServents = [];
    	var myTeams = {};
		$(function() {
		    $.post("#(homeurl ??)/detail/loadServent",function(data){
		    	myServents = data;
		    	for (var i = 0; i < data.length; i++) {
					var row = data[i];
					var info = DATA_DB["servent"][row.sid];
					var gen = "<option value='"+row.id+"'>Lv." + row.level + " "
							+ info.name + " " + rareSHOW[info.rare]
							+ "</option>";
					serventOptionsHTML += gen;
				}
		    	for (var i = 1; i <= 6; i++) {
					$("#teamServent"+i).html(serventOptionsHTML);
				}
		    	$("#createTeam").click(function(){
		    		resetEditor();
		    		$('#TeamEditor').modal('show');
		    	});
		    	$("#saveTeam").click(function(){
		    		saveOrUpdateTeam();
		    	});
			});
		    loadTeam();
		});
		function loadTeam() {
			$("#tableBody").html("");
		    $.post("#(homeurl ??)/team/loadTeam",function(data){
		    	var result = "";
		    	for (var i = 0; i < data.length; i++) {
		    		var row = data[i];
		    		myTeams[row.id] = row;
		    		result += "<tr id='team_"+row.id+"'>"+generateRowData(row)+"</tr>";
		    	}
				$("#tableBody").html(result);
		    });
		}
		function generateRowData(data) {
			var result = "<td>"+data.teamname+"</td>";
			for(var i=0;i<6;i++) {
				if(i<data.members.length){
					var row = data.members[i];
					var info = DATA_DB["servent"][row.sid];
					result += "<td class='rareColor"+info.rare+"'>Lv." + row.level + " "
					+ info.name + " <span class='starColor'>" + rareSHOW[info.rare] +"</span></td>";
				}else{
					result += "<td></td>";
				}
			}
			result += "<td>";
			result += "<button type='button' class='btn btn-info' onclick='showEditTeam("+data.id+")'>修改</button>";
			result += "<button type='button' class='btn btn-danger' onclick='showDeleteTeam("+data.id+")'>删除</button>";
			result += "</td>";
			
			return result;
		}
		function showEditTeam(teamId) {
			loadToEditor(teamId)
    		$('#TeamEditor').modal('show');
		}
		function showDeleteTeam(teamId) {
			$.post("#(homeurl ??)/team/deleteTeam",{teamId:teamId},function(data){
				if(data.isFail){
					alert(data.msg);
				}else{
	    			loadTeam();
				}
			});
		}
		function saveOrUpdateTeam() {
			var teamId = $("#teamId").val();
			var teamName = $("#teamName").val();
			var teamServent = [];
	    	for (var i = 1; i <= 6; i++) {
				var serventId = $("#teamServent"+i).val();
				if(serventId){
					teamServent.push(serventId);
				}
			}			
			$.post("#(homeurl ??)/team/saveOrUpdateTeam",
					{
						teamId:teamId,
						teamName:teamName,
						teamServent:teamServent
					},
					function(data){
						if(data.isFail){
							alert(data.msg);
						}else{
			    			$('#TeamEditor').modal('hide');
			    			loadTeam();
						}
					}
			);
		}
		function loadToEditor(teamId) {
			var name = myTeams[teamId].teamname;
			var servents = myTeams[teamId].members;
			$("#teamId").val(teamId);
			if(name){
				$("#teamName").val(name);
			}else{
				$("#teamName").val("");
			}
			if(servents){
		    	for (var i = 1; i <= 6; i++) {
		    		if(servents[i-1]){
						$("#teamServent"+i).val(servents[i-1].id);
		    		}else{
						$("#teamServent"+i).val("");
		    		}
				}
			}else{
		    	for (var i = 1; i <= 6; i++) {
					$("#teamServent"+i).val("");
				}
			}
		}
		function resetEditor() {
			$("#teamName").val("");
			$("#teamId").val("");
	    	for (var i = 1; i <= 6; i++) {
				$("#teamServent"+i).val("");
			}
		}
		var rareSHOW = {
			"1" : "★",
			"2" : "★★",
			"3" : "★★★",
			"4" : "★★★★",
			"5" : "★★★★★"
		};
	</script>
	<script src="#(homeurl ??)/js/db.js"></script>
#end

#define css()
<style type="text/css">
    .mainTable {
        margin-top: 5px;
    }
</style>
#end